<template>
  <div>
    <div class="header-container">
      <span>收货地址</span>
    </div>
    <div class="main-container">
      <div class="address-block">
        <div class="add-address-block">
          <i class="el-icon-circle-plus" @click="addShoppingAddress"></i>
          <div>添加新地址</div>
        </div>
      </div>
      <div
        v-for="(item, index) in ShippingAddressList"
        :key="index"
        class="address-block"
      >
        <div class="had-address-block">
          <div>{{ item.shipName }}</div>
          <div>
            <div class="label">电话：</div>
            <div>{{ item.userPhone }}</div>
          </div>
          <div>
            <div class="label">地区：</div>
            <div>{{ item.address.join("--") }}</div>
          </div>
          <div>
            <div class="label">地址：</div>
            <div>{{ item.streetDetail }}</div>
          </div>
        </div>
        <div class="button-group">
          <span @click="editAddress(item)">修改</span>
          <span @click="deleteAddress(item.id)">删除</span>
        </div>
      </div>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-form
        ref="form"
        :model="diaData"
        label-width="75px"
        label-position="right"
      >
        <el-form-item label="昵称">
          <el-input v-model="diaData.shipName"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="diaData.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="地区">
          <el-cascader
            v-model="diaData.address"
            :options="addressList"
            :props="{ expandTrigger: 'hover', label: 'name', value: 'name' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="diaData.streetDetail"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDiaData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  setShippingAddress,
  getShippingAddress,
  editShippingAddress,
  delShippingAddress,
} from "@/services/user";

export default {
  data() {
    return {
      ShippingAddressList: [],
      dialogTableVisible: false,
      isAdd: true,
      diaData: {
        shipName: "",
        userPhone: "",
        province: "",
        city: "",
        region: "",
        streetDetail: "",
      },
      addressList: [],
    };
  },
  methods: {
    chnage(e) {
      this.$forceUpdate();
    },
    addShoppingAddress() {
      this.isAdd = true;
      this.dialogTableVisible = true;
      this.diaData = {
        shipName: "",
        userPhone: "",
        province: "",
        city: "",
        region: "",
        streetDetail: "",
      };
    },
    getShippingAddressList() {
      getShippingAddress().then((res) => {
        this.ShippingAddressList = res.data.data || [];
        this.ShippingAddressList.forEach((item) => {
          let { province, city, region } = item;
          item.address = [province, city, region];
        });
      });
    },
    editAddress(item) {
      this.isAdd = false;
      this.dialogTableVisible = true;
      Object.keys(item).forEach((key) => {
        this.diaData[key] = item[key];
      });
    },
    saveDiaData() {
      [this.diaData.province, this.diaData.city, this.diaData.region] =
        this.diaData.address;
      if (this.isAdd) {
        setShippingAddress(this.diaData).then((res) => {
          this.$message.success(res.data.msg);
          this.getShippingAddressList();
          this.dialogTableVisible = false;
        });
      } else {
        editShippingAddress(this.diaData).then((res) => {
          this.$message.success(res.data.msg);
          this.getShippingAddressList();
          this.dialogTableVisible = false;
        });
      }
      // Object.keys(this.diaData).forEach((key) => {
      //   this.diaData[key] = "";
      // });
    },
    deleteAddress(addressId) {
      delShippingAddress({ addressId }).then((res) => {
        this.$message(res.data.msg);
        this.getShippingAddressList();
      });
    },
  },
  mounted() {
    this.addressList = JSON.parse(localStorage.getItem("addressList"));
    this.getShippingAddressList();
  },
};
</script>
<style lang="scss" scoped>
.header-container {
  display: flex;
  align-items: center;
  height: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d0d6d9;
}
.main-container {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  .address-block {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 24px;
    width: 297px;
    height: 227px;
    border: 1px solid #d0d6d9;
    box-sizing: border-box;
    &:nth-child(3n) {
      margin-right: 0;
    }
    .add-address-block {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      i {
        color: #d9dde1;
        font-size: 50px;
        font-weight: 700;
        cursor: pointer;
      }
      div {
        font-size: 14px;
        color: #4d555d;
        margin-top: 18px;
      }
    }
    .had-address-block {
      > div {
        font-size: 14px;
        color: #4d555d;
        display: flex;
        margin-bottom: 5px;
        &:first-child {
          margin-bottom: 10px;
          font-size: 16px;
          color: #07111b;
          font-weight: 700;
          line-height: 32px;
        }
        .label {
          width: 50px;
          flex-shrink: 0;
        }
      }
    }
    .button-group {
      position: absolute;
      bottom: 15px;
      right: 10px;
      display: flex;
      justify-content: flex-end;
      font-size: 12px;
      span {
        color: $primary-color;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
}
.el-cascader {
  width: 100%;
}
</style>